<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
	</head>
	<body>
		<h1>MK Animation Studio 1.0</h1>
		<script>
		
			MK = {
				Core: {}
				, Const: {}
				, Objects: {}
			};

			MK.Const.CANVAS_WIDTH = 800;
			MK.Const.CANVAS_HEIGHT = 600;
			MK.Const.FPS = 24;

			MK.Core = {
				canvasElement: null
				, canvas:null
				/******************��� ������***************************/
				,sprite: "file:///D:/Projects/Games/mkonline/raiden/all%20raiden.png"//���� � ��������
				, map: [
					  {x:69, y:48, w:72, h:136, d:5}
					 , {x:296, y:48, w:72, h:136, d:5}
					 , {x:69, y:48, w:72, h:136, d:5}
					 , {x:296, y:48, w:72, h:136, d:5}
					 , {x:296, y:48, w:72, h:136, d:5}
					 , {x:296, y:48, w:72, h:136, d:5}
					 , {x:296, y:48, w:72, h:136, d:5}
					 , {x:296, y:48, w:72, h:136, d:5}
					 , {x:296, y:48, w:72, h:136, d:5}
					 , {x:296, y:48, w:72, h:136, d:5}
					]
				/********************************************************/	
					,x:500
					,y:200
				, counter: 0
				, spriteImg: null
				, init: function () {
					var context =this;
					
					this.canvasElement =$("<canvas width='" + MK.Const.CANVAS_WIDTH + "' height='" + MK.Const.CANVAS_HEIGHT + "'></canvas>");
					this.canvas = this.canvasElement.get(0).getContext("2d");
					this.canvasElement.appendTo('body');
					this.spriteImg = new Image();
					this.spriteImg.src = this.sprite;
					this.spriteImg.onload = function() {
						
					}
					this.intervalId = null;
					this.start = function(){
						if(!this.intervalId)
						this.intervalId = setInterval(function() {
							context.draw(true);
						}, 1000/MK.Const.FPS);
					}
					this.stop = function() {
						clearInterval(this.intervalId);
						this.intervalId = null;
					}
					
				}
				, draw: function(flag) {
					
					this.clear();
					this.canvas.drawImage(this.spriteImg,this.map[this.counter].x,this.map[this.counter].y, this.map[this.counter].w, this.map[this.counter].h, this.x, this.y, this.map[this.counter].w, this.map[this.counter].h);		
					$("#posX").val(this.map[this.counter].x);
					$("#posY").val(this.map[this.counter].y);
					$("#sizeW").val(this.map[this.counter].w);
					$("#sizeH").val(this.map[this.counter].h);
					$("#iposX").val(this.map[this.counter].x);
					$("#iposY").val(this.map[this.counter].y);
					$("#isizeW").val(this.map[this.counter].w);
					$("#isizeH").val(this.map[this.counter].h);
					$("#sframeNumber").text(this.counter);
					if(flag) {
						if(!this.map[this.counter]._d)this.map[this.counter]._d = 0;
						if(this.map[this.counter]._d ==this.map[this.counter].d) {
							this.counter++;
							if(this.counter >= this.map.length) this.counter = 0;
							this.map[this.counter]._d = 0;
						}
						this.map[this.counter]._d++;
					}
					
				}
				, clear: function() {
					this.canvas.clearRect(0, 0, 800, 600);
				}
				, changeFPS: function(sender) {
					MK.Const.FPS = $(sender).val();
				}
				, setX:function(sender){
					this.map[this.counter].x = $(sender).val();
					$("#iposX").val($(sender).val())
					$("#posX").val($(sender).val())
					this.draw();
				}
				, setY:function(sender){
					this.map[this.counter].y = $(sender).val();
					$("#iposY").val($(sender).val())
					$("#posY").val($(sender).val())
					this.draw();
				}
				, setW:function(sender){
					this.map[this.counter].w = $(sender).val();
					$("#isizeW").val($(sender).val())
					$("#sizeW").val($(sender).val())
					this.draw();
				}
				, setH:function(sender){
					this.map[this.counter].h = $(sender).val();
					$("#isizeH").val($(sender).val())
					$("#sizeH").val($(sender).val())
					this.draw();
				}
				, getResult: function(){
					$('#taResult').val(JSON.stringify(this.map));
				}
				, next:function() {
					this.map[this.counter]._d = 0
					this.counter++;
					if(this.counter >= this.map.length) this.counter = 0;
					this.draw();
				}
				, prev:function() {
					this.map[this.counter]._d = 0
					this.counter--;
					if(this.counter < 0) this.counter = this.map.length-1;
					this.draw();
				}
				,load: function(){
					this.spriteImg.src = $("#tbxFileName").val();
				}
				
			}

			$(document).ready(function(){
				MK.Core.init();
			});

		</script>
		<div style="width:300px; float:left;">
		<fieldset>
			<legend>File</legend>
			<input type="text" id="tbxFileName" />
			<input type="button" onclick="MK.Core.load()" value="Load" />
		</fieldset>
		<fieldset>
			<legend>Playing</legend>
			<input type="button" onclick="MK.Core.start()" value="start"/>
			<input type="button" onclick="MK.Core.stop()" value="stop"/><br/>
			<label>Speed:<input type="range" onchange="MK.Core.changeFPS(this)" value="24" min="1" max="100" /></label><br/>
			Frame: <span id="sframeNumber">0</span>
			<input type="button" onclick="MK.Core.prev()" value="prev"/>
			<input type="button" onclick="MK.Core.next()" value="next"/>
			
		</fieldset>
		<fieldset>
			<legend>Position</legend>
			<label>X:<input type="range" id="posX" onchange="MK.Core.setX(this)" value="0" min="0" max="10000" /><input onchange="MK.Core.setX(this)" id="iposX" value="0" /><br/></label><br/>
			<label>Y:<input type="range" id="posY" onchange="MK.Core.setY(this)" value="0" min="0" max="10000" /><input id="iposY" onchange="MK.Core.setY(this)" value="0" /></label>
		</fieldset>
		<fieldset>
			<legend>Size</legend>
			<label>Width:<input type="range" id="sizeW" onchange="MK.Core.setW(this)" value="0" min="0" max="300" /><input onchange="MK.Core.setW(this)" id="isizeW" value="0" /></label><br/>
			<label>Height:<input type="range" id="sizeH" onchange="MK.Core.setH(this)" value="0" min="0" max="300" /><input onchange="MK.Core.setH(this)" id="isizeH" value="0" /></label>
		</fieldset>
		<fieldset>
			<legend>Offset</legend>
			<label>X:<input type="range" id="offsetX" onchange="" value="0" min="0" max="200" /><input id="ioffsetX" value="0" /></label><br/>
			<label>Y:<input type="range" id="offsetY" onchange="" value="0" min="0" max="200" /><input id="ioffsetY" value="0" /></label>
		</fieldset>
		<fieldset>
			<legend>Result</legend>
			<textarea id="taResult" rows="" cols=""></textarea><input type="button" value="get result 	" onclick="MK.Core.getResult()">
		</fieldset>
		</div>
	</body>
</html>